<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			.cat {
				width: 500px;
				margin: 0 auto;
				position: relative;
				cursor: pointer;
			}
			
			.head_content {
				position: absolute;
				top: 100px;
			}
			
			.ear_left {
				width: 100px;
				height: 150px;
				background-color: #FCEDBC;
				border-radius: 50% / 10%;
				position: absolute;
				top: 22px;
				left: 16px;
				transform: rotate(-20deg);
			}
			
			.ear_right {
				width: 100px;
				height: 150px;
				background-color: #FCEDBC;
				border-radius: 50% / 10%;
				position: absolute;
				top: 22px;
				left: 227px;
				transform: rotate(20deg);
			}
			
			.head {
				width: 345px;
				height: 270px;
				background-color: #FFF5D7;
				-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
				border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
				position: absolute;
				top: 0;
			}
			
			.brow_left {
				width: 44px;
				height: 20px;
				border: 1px solid transparent;
				border-top: 2px solid #000;
				border-radius: 50%/35%;
				position: absolute;
				top: 49px;
				left: 60px;
				transform: rotate(-37deg);
			}
			
			.brow_right {
				width: 44px;
				height: 20px;
				border: 1px solid transparent;
				border-top: 2px solid #000;
				border-radius: 50%/35%;
				position: absolute;
				top: 49px;
				left: 240px;
				transform: rotate(37deg);
			}
			
			.eye_left {
				width: 70px;
				height: 70px;
				background: #fff;
				border: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: 67px;
				left: 70px;
			}
			
			.eye_right {
				width: 70px;
				height: 70px;
				background: #fff;
				border: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: 67px;
				left: 205px;
			}
			
			.pupil {
				width: 38px;
				height: 38px;
				background: #000;
				border-radius: 50%;
				position: absolute;
				top: 7px;
				left: 30px;
			}
			
			.beard_left1 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 158px;
				left: -50px;
				transform: rotate(10deg);
			}
			
			.beard_left2 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 187px;
				left: -60px;
				transform: rotate(-7deg);
			}
			
			.beard_left3 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 208px;
				left: -50px;
				transform: rotate(-16deg);
			}
			
			.beard_right1 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 158px;
				left: 300px;
				transform: rotate(-10deg);
			}
			
			.beard_right2 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 187px;
				left: 310px;
				transform: rotate(7deg);
			}
			
			.beard_right3 {
				width: 95px;
				border-top: 1px solid #000;
				position: absolute;
				top: 208px;
				left: 300px;
				transform: rotate(16deg);
			}
			
			.nose {
				width: 20px;
				height: 10px;
				background-color: #000;
				border-radius: 50%/40%;
				position: absolute;
				top: 142px;
				left: 161px;
			}
			
			.mouse {
				position: absolute;
				top: 152px;
				left: 171px;
			}
			
			.mouse_top {
				height: 10px;
				border-left: 1px solid #000;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.mouse_left {
				width: 100px;
				height: 100px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: -78px;
				left: -86px;
			}
			
			.mouse_right {
				width: 100px;
				height: 100px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: -78px;
				left: -14px;
			}
			
			.mouse_bottom {
				width: 20px;
				height: 20px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
				position: absolute;
				top: 8px;
				left: -9px;
				transform: rotate(45deg);
			}
			
			.mouse_bottom_show {
				width: 100px;
				height: 100px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: -63px;
				left: -49px;
				display: none;
			}
			
			.miao {
				position: absolute;
				top: -5px;
				left: 52px;
				font-size: 20px;
				opacity: 0;
				color: #FD7055;
			}
			
			@keyframes miaoAnim {
				0% {
					opacity: 0;
					top: -5px;
					left: 52px;
				}
				30% {
					opacity: 1;
					top: -20px;
					left: 72px;
					font-size: 23px;
				}
				65% {
					opacity: 0.5;
					top: -35px;
					left: 92px;
					font-size: 26px;
				}
				100% {
					opacity: 0;
					top: -50px;
					left: 112px;
					font-size: 30px;
				}
			}
			
			.mouse:hover .mouse_bottom {
				display: none;
			}
			
			.mouse:hover .mouse_bottom_show {
				display: block;
			}
			
			.mouse:hover .miao {
				animation: miaoAnim 1.5s linear;
			}
			
			.body_content {
				position: absolute;
				top: 305px;
				left: 101px;
			}
			
			.body {
				width: 140px;
				height: 165px;
				background: #FCEDBC;
				border: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -10;
			}
			
			.arm_left {
				width: 20px;
				height: 80px;
				background: #FAE8AD;
				border: 1px solid #000;
				border-radius: 50% / 40%;
				position: absolute;
				top: 30px;
				left: 10px;
				transform: rotate(50deg);
				z-index: -20;
			}
			
			.arm_right {
				width: 20px;
				height: 80px;
				background: #FAE8AD;
				border: 1px solid #000;
				border-radius: 50% / 40%;
				position: absolute;
				top: 30px;
				left: 110px;
				transform: rotate(-50deg);
				z-index: -20;
			}
			
			.leg_left {
				width: 30px;
				height: 93px;
				background: #FAE8AD;
				border: 1px solid #000;
				border-radius: 50% / 40%;
				position: absolute;
				top: 88px;
				left: 14px;
				transform: rotate(-20deg);
				z-index: -20;
			}
			
			.leg_right {
				width: 30px;
				height: 93px;
				background: #FAE8AD;
				border: 1px solid #000;
				border-radius: 50% / 40%;
				position: absolute;
				top: 88px;
				left: 96px;
				transform: rotate(20deg);
				z-index: -20;
			}
			
			.tail {
				position: absolute;
				top: 86px;
				left: 52px;
				z-index: -30;
				animation: tailanim 1.5s infinite;
			}
			
			.tail1 {
				width: 236px;
				height: 100px;
				border: 1px solid transparent;
				border-top: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
				transform: rotate(-25deg);
			}
			
			.tail2 {
				width: 61px;
				height: 41px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: -13px;
				left: 145px;
				transform: rotate(-38deg);
			}
			
			.tail3 {
				width: 23px;
				height: 30px;
				border: 1px solid transparent;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
				border-radius: 50%;
				position: absolute;
				top: 5px;
				left: 148px;
				transform: rotate(121deg);
			}
			
			@keyframes tailanim {
				/*尾巴动画*/
				20% {
					transform: rotate(5deg);
				}
				40% {
					transform: rotate(0deg);
				}
				60% {
					transform: rotate(10deg);
				}
				100% {
					transform: rotate(0deg);
				}
			}
			
			.ear_left:hover {
				animation: earLeftAnim 0.5s linear;
			}
			
			.ear_right:hover {
				animation: earRightAnim 0.5s linear;
			}
			
			@keyframes earLeftAnim {
				50% {
					top: 13px;
					transform: rotate(-3deg);
				}
				100% {
					top: 22px;
					transform: rotate(-20deg);
				}
			}
			
			@keyframes earRightAnim {
				50% {
					top: 13px;
					transform: rotate(3deg);
				}
				100% {
					top: 22px;
					transform: rotate(20deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="cat">
			<div class="head_content">
				<div class="ear_left"></div>
				<div class="ear_right"></div>
				<div class="head"></div>
				<div class="brow_left"></div>
				<div class="brow_right"></div>
				<div class="eye_left">
					<div id="pL" class="pupil"></div>
				</div>
				<div class="eye_right">
					<div id="pR" class="pupil"></div>
				</div>
				<div class="beard_left1"></div>
				<div class="beard_left2"></div>
				<div class="beard_left3"></div>
				<div class="beard_right1"></div>
				<div class="beard_right2"></div>
				<div class="beard_right3"></div>
				<div class="nose"></div>
				<div class="mouse">
					<div class="mouse_top"></div>
					<div class="mouse_left"></div>
					<div class="mouse_right"></div>
					<div class="mouse_bottom"></div>
					<div class="mouse_bottom_show"></div>
					<div class="miao">喵</div>
				</div>
			</div>
			<div class="body_content">
				<div class="body"></div>
				<div class="arm_left"></div>
				<div class="arm_right"></div>
				<div class="leg_left"></div>
				<div class="leg_right"></div>
				<div class="tail">
					<div class="tail1"></div>
					<div class="tail2"></div>
					<div class="tail3"></div>
				</div>
			</div>
		</div>

		<script>
			//获取cat所在div的位置
			var catx = document.getElementsByClassName("cat")[0].offsetLeft;
			var pL = document.getElementById("pL");
			var pR = document.getElementById("pR");
			var r = 17;

			document.onmousemove = function(ev) {
				var e = ev || event;
				var m = [];
				m.x = e.clientX - catx; //鼠标坐标能落在左边等位置
				m.y = e.clientY - 170; //head_content、head、eye离上方的距离，使鼠标能落在上方区域
				var s = [];
				s.x = pL.offsetLeft;
				s.y = pL.offsetTop;
				var mosx = Math.abs(m.x - s.x);
				var mosy = Math.abs(m.y - s.y);
				var angle = Math.atan(mosy / mosx);
				var cx = 0,
					cy = 0;
				if(m.x >= s.x && m.y <= s.y) {
					cx = Math.cos(angle) * r;
					cy = Math.sin(angle) * -r;
					//            console.log("右下");
				}
				if(m.x < s.x && m.y < s.y) {
					cx = Math.cos(angle) * -r;
					cy = Math.sin(angle) * -r;
					//            console.log("左下");
				}
				if(m.x < s.x && m.y > s.y) {
					cx = Math.cos(angle) * -r;
					cy = Math.sin(angle) * r;
					//            console.log("左上");
				}
				if(m.x > s.x && m.y > s.y) {
					cx = Math.cos(angle) * r;
					cy = Math.sin(angle) * r;
					//            console.log("右上");
				}

				if((m.x + catx) >= catx && (m.x + catx) <= (catx + 345) && (m.y + 170) >= 100 && (m.y + 170) <= 360) {
					pL.style.top = 15 + 'px';
					pR.style.top = 15 + 'px';
					pL.style.left = 18 + 'px';
					pR.style.left = 18 + 'px';
				} else {
					pL.style.top = 15 + cy + 'px';
					pR.style.top = 15 + cy + 'px';
					pL.style.left = 17 + cx + 'px';
					pR.style.left = 17 + cx + 'px';
				}
			}
		</script>
	</body>

</html>